<template>
  <div class="app-container">
    <div>
      <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
        <!--  两列图表 -->
        <el-row :gutter="20">
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
            <el-card  class="padding-top-bottom-16 padding-left-right-6">
              <div class="flex justify-content-space-between ">
                <div>
                  <div class="card_title">门诊患者平均预约诊疗率</div>
                  <div class="card_val">{{registrationInfo.reservationTreatment}}%</div>
                </div>
                <div class="charts_content">
                  <el-progress type="dashboard" :percentage="registrationInfo.reservationTreatment" :color="colors"/>
                </div>
              </div>
              <div class="formula">计算公式：(预约诊疗人次数)/(总诊疗人次数)*100%</div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
            <el-card  class="padding-top-bottom-16 padding-left-right-6 ">
              <div class="flex justify-content-space-between ">
                <div>
                  <div class="card_title">门诊患者平均预约后平均等待时间</div>
                  <div class="card_val">{{registrationInfo.waitingTime}}分钟</div>
                </div>
                <el-progress type="dashboard" :percentage="registrationInfo.waitingTime" :color="colors"/>
              </div>
              <div class="formula">患者报到时间与进入诊室时间的差值</div>
            </el-card>
          </el-col>
        </el-row>

      <el-card class="padding-top-bottom-16 padding-left-right-6" style="margin: 20px 0">
        <img class="banner" src="@/assets/static/服务流程-图.png" alt="">
        <div class="max_title">电子病历应用功能水平分级</div>
        <div class="text">按照《关于印发电子病历系统应用水平分级评价管理办法（试行）及评价标准（试行）的通知》(国卫办医函〔2018〕1079号)要求，电子病历系统应用水平划分为0-8共9个等级，10个角色，39个评价项目。</div>
        <div style="padding-bottom: 20px">
           <div style="color: black;padding-bottom: 15px">当前等级 : <span style="color: #4677F7;font-size: 18px"> Level 6</span></div>
           <el-progress :percentage="60" :show-text="false" />
        </div>
        <el-row :gutter="20">
          <el-col  v-for="(item, index) in cardList" :key="index" style="margin-top: 20px;" :xs="24" :sm="12" :md="8" :lg="4">
            <div class="card_wrapper  padding-20"  >
              <div class="title">{{item.title}}</div>
              <div class="flex justify-content-end ">
                <div>
                  <div class="val">{{item.completion}}</div>
                  <div class="tips">完成度</div>
                </div>
              </div>
            </div>

          </el-col>
        </el-row>

        <div style="margin-top: 20px;">
          <EchartsComponent  :options="chartOptions[0]" style="height: 300px"></EchartsComponent>
        </div>
      </el-card>
    </div>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {getAverageRatio} from "@/api/quality/service.js";
import DateUtils from "@/utils/utils.js";
const analyzeDialogVisible = ref(false);
// 选择历史时间
const selectDate = (time) => {
  getAverageRatioInfo({starTime: time[0], endTime: time[1]})
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]
const cardList = ref([
  { title: '病房医师', completion: '92%' },
  { title: '病房护士', completion: '92%' },
  { title: '门诊医师', completion: '92%' },
  { title: '检查科室', completion: '92%' },
  { title: '检验处理', completion: '92%' },
  { title: '治疗信息处理', completion: '92%' },
  { title: '医疗保障', completion: '92%' },
  { title: '病历管理', completion: '92%' },
  { title: '电子病历基础', completion: '92%' },
  { title: '信息利用', completion: '92%' },
]);
const chartOptions = ref([
  {

    legend: { right: '20',icon: 'circle'},
    tooltip: {},
    dataset: {
      dimensions: ['product', '完成项目', '未完成项目'],
      source: [
        { product: '一月', '完成项目': 43.3, '未完成项目': 85.8 },
        { product: '二月', '完成项目': 83.1, '未完成项目': 73.4 },
        { product: '三月', '完成项目': 86.4, '未完成项目': 65.2 },
        { product: '四月', '完成项目': 72.4, '未完成项目': 53.9 },
        { product: '五月', '完成项目': 43.3, '未完成项目': 85.8 },
        { product: '六月', '完成项目': 83.1, '未完成项目': 73.4 },
        { product: '七月', '完成项目': 86.4, '未完成项目': 65.2 },
        { product: '八月', '完成项目': 72.4, '未完成项目': 53.9 },
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar',color:'#3D8BFF' }, { type: 'bar',color:'#9CB0D9' }]
  },
]);

const registrationInfo = ref({
  reservationTreatment:0, // 门诊患者平均预约诊疗率
  waitingTime:0 // 门诊患者平均预约后平均等待时间
});


// 各项预约时间
const getAverageRatioInfo = async (params) => {
  let result = await getAverageRatio(params);
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    console.log("data",data)
    registrationInfo.value.reservationTreatment = data.serveScheduleRatio;
    registrationInfo.value.waitingTime = data.averageAccessTime;
  }
}

getAverageRatioInfo({
  starTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd"),
  endTime: DateUtils.formatDate(DateUtils.now(),"yyyy-MM-dd")
})





</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  .el-card {
     border-radius: 13px;
     border: none;
    .banner{
       width: 100%;
       display: block;
       border-radius: 10px;
       margin-bottom: 20px;
    }
    .max_title{
       color: black;
       font-weight: bolder;
       font-size: 18px;
    }
    .text{
       color: #858E98;
       padding: 20px 0 20px 0;
       font-size: 14px;
    }
    .card_title {
      font-size: 18px;
      color: black;
    }
    .card_val {
      font-size: 28px;
      font-weight: 600;
      color: #4677F7;
      margin-top: 20px;
    }
    .charts_content{
      height: 120px;
      width: 120px;
      margin-right: 20px;
    }
    .formula{
      color: #858E98;
      font-size: 14px;
    }
    .card_wrapper{
      border: 1px solid #cbcfd7;
      border-radius: 10px;
      .title{
        color: #000000;
        font-size: 16px;
      }
      .val{
        font-size: 22px;
        font-weight: 600;
        color: #4677F7;
      }
      .tips{
        color: #858E98;
        font-size: 14px;
      }

    }
  }




























}
</style>
